<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Bookmark Example</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://www.openlayers.org/dev/examples/style.css" type="text/css" />
    <link rel="stylesheet" href="http://svn.openlayers.org/addins/bookmark/trunk/theme/default/bookmark.css" type="text/css" />
    <style type="text/css">
        body { position: relative; }
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
            position: relative;
        }
        input[type="button"] { border: 1px solid black; }
    </style>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="../lib/OpenLayers/Control/Bookmark.js"></script>
    <script type="text/javascript">
        var map, bookmark;
        function initMap(){
            map = new OpenLayers.Map('map', { controls: [], theme: null });
            map.addControl(new OpenLayers.Control.Navigation());

            // inside the map, docked right middle
            bookmark = new OpenLayers.Control.Bookmark({ 'title': 'Bookmarks in map', 'allowRemove': true });
            map.addControl(bookmark);
            bookmark.maximizeControl();
            bookmark.add("ATLANTA",new OpenLayers.Bounds(-85.085373,33.114328,-83.679123,34.520578));
            bookmark.add("BOSTON", new OpenLayers.Bounds(-71.401901,41.989908,-70.698776,42.693033));
            bookmark.add("WASHINGTON DC","-77.338126,38.639689,-76.788809,39.189005");

            // round the corners with rico
            OpenLayers.Rico.Corner.round( bookmark.div, {corners: "tl bl", bgColor: "transparent", color: "darkblue", blend: false});
            OpenLayers.Rico.Corner.changeOpacity(bookmark.contentDiv, 0.75);

            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}, {'displayInLayerSwitcher':false} );

            map.addLayer(ol_wms);
            if (!map.getCenter()) map.zoomToMaxExtent();
        }
    </script>
  </head>
  <body onload="initMap()">
    <h1 id="title">Bookmark Control Example</h1>
    <div id="tags"></div>
    <p id="shortdesc">
      Demonstrates the use of the Bookmark Control.<br />
      Styled with CSS only.  Corners rounded by Rico outside of the class.
    </p>
    <div id="map"></div>
    <div id="docs">
      <p>This demonstrates use of the Bookmarks.</p>
   </div>
   <div>
      <form>
         Name: <input type="text" id="name" style="width:100px;border: 1px solid black"><br />
         Coords: <input type="text" id="coords" style="width:200px;border: 1px solid black">&nbsp;&nbsp;<input type="button" value="Get Current Coords" onclick="document.getElementById('coords').value = map.getExtent().toBBOX()"><br /><br />
         <input type="button" value="Zoom To" onclick="if(document.getElementById('name').value != ''){ bookmark.zoomToLabel(document.getElementById('name').value) } else { alert('Need a name and coords') }">&nbsp;&nbsp;
         <input type="button" value="Add" onclick="if(document.getElementById('name').value != '' && document.getElementById('coords').value != ''){ bookmark.add(document.getElementById('name').value, document.getElementById('coords').value) } else { alert('Need a name and coords') }">&nbsp;&nbsp;
         <input type="button" value="Remove" onclick="if(document.getElementById('name').value != ''){ bookmark.remove(document.getElementById('name').value) } else { alert('Need a name') }">&nbsp;&nbsp;
         <input type="button" value="Remove All" onclick="bookmark.clear()">
      </form>
   </div>
  </body>
</html>
